<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				
			}
			#box{
				width: 700px;
				height: 700px;
				background: url(img/clock.jpg) no-repeat center;
				margin: 0 auto;
				position: relative;
			}
			#hour, #mintue, #second{
				position: absolute;
				left: 50%;
				top: 0;
				width: 12px;
				height: 700px;
			}
			#hour{
			background: url(img/hour.png) no-repeat center;
			}
			#mintue{
				background: url(img/minute.png) no-repeat center;
			}
			#second{
				background: url(img/second.png) no-repeat center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="hour"></div>
			<div id="mintue"></div>
			<div id="second"></div>
		</div>
		<script>
			window.onload = function(){
				//获取一个时间
				setInterval(function(){
					var date = new Date();
					//求出总毫秒
					var hs = date.getMilliseconds();//求出总时间
					var s = date.getSeconds() + hs / 1000;//从小到大求时间
					var m = date.getMinutes() + s / 60;
					var h = date.getHours() + m / 60;
					
					//运动transfrom进行旋转
					$("hour").style.transform = 'rotate('+ h * 30 +'deg)';//360/12
					$("mintue").style.transform = 'rotate('+ m * 6 +'deg)';//360/12/5
					$("second").style.transform = 'rotate('+ s * 6 +'deg)';//360/12/5
					
					
					
				},1000);
				function $(id){
					return typeof id === String?document.getElementById(id):null;
				}
			}
			
			
		</script>
	</body>
</html>
